<template>
  <div style="height: 100%">
    <!-- <dv-border-box-12 style="height: 100%" :class="'echarts_box'"> -->
    <div style="height: 100%" class="chart" ref="chart"></div>
    <!-- </dv-border-box-12> -->
  </div>
</template>

<script>
import { mixinReszie } from "@/mixin/resize.js";
export default {
  mixins: [mixinReszie],
  props: {
    countAllObj: {
      type: Object,
      default: () => {}
    },

    activeName: {
      type: String,
      default: ""
    }
  },
  watch: {
    countAllObj: {
      handler: function(newData, oldData) {
        if (this.activeName == "历史报警查询") {
          setTimeout(() => {
            this.init();
          }, 500);
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      lineChart: null
    };
  },
  methods: {
    init() {
      var dataStyle = {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          shadowBlur: 0,
          shadowColor: "#203665"
        }
      };
      const option = {
        title: {
          text: "报警类型占比",
          x: "center",
          top: "5",
          textStyle: {
            color: "#fff",
            fontSize: 18,
            fontWeight: "400"
          }
        },
        // backgroundColor: "#20263f",
        series: [
          {
            name: "工艺超限",
            type: "pie",
            clockWise: false,
            radius: [50, 60],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ["15%", "60%"],
            data: [
              {
                value: this.countAllObj.upLimitalarmCount,
                label: {
                  normal: {
                    rich: {
                      a: {
                        color: "#3a7ad5",
                        align: "center",
                        fontSize: 20,
                        fontWeight: "bold"
                      },
                      b: {
                        color: "#fff",
                        align: "center",
                        fontSize: 16
                      }
                    },
                    formatter: function(params) {
                      return "{b|工艺超限}\n\n" + "{a|" + params.value + "%}";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "14",
                      fontWeight: "normal",
                      color: "#fff"
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#2c6cc4",
                    shadowColor: "#2c6cc4",
                    shadowBlur: 0
                  }
                }
              },
              {
                value: 75,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "#24375c"
                  },
                  emphasis: {
                    color: "#24375c"
                  }
                }
              }
            ]
          },
          {
            name: "设备故障",
            type: "pie",
            clockWise: false,
            radius: [50, 60],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ["50%", "60%"],
            data: [
              {
                value: this.countAllObj.deviceWarmalarmCount,
                label: {
                  normal: {
                    rich: {
                      a: {
                        color: "#FDDB6C",
                        align: "center",
                        fontSize: 20,
                        fontWeight: "bold"
                      },
                      b: {
                        color: "#fff",
                        align: "center",
                        fontSize: 16
                      }
                    },
                    formatter: function(params) {
                      return "{b|设备故障}\n\n" + "{a|" + params.value + "%}";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "14",
                      fontWeight: "normal",
                      color: "#fff"
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#F7BE04",
                    shadowColor: "#F7BE04",
                    shadowBlur: 0
                  }
                }
              },
              {
                value: 50,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "#a8a299"
                  },
                  emphasis: {
                    color: "#a8a299"
                  }
                }
              }
            ]
          },
          {
            name: "通讯报警",
            type: "pie",
            clockWise: false,
            radius: [50, 60],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ["85%", "60%"],
            data: [
              {
                value: this.countAllObj.comWarmalarmCount,
                label: {
                  normal: {
                    rich: {
                      a: {
                        color: "#603dd0",
                        align: "center",
                        fontSize: 20,
                        fontWeight: "bold"
                      },
                      b: {
                        color: "#fff",
                        align: "center",
                        fontSize: 16
                      }
                    },
                    formatter: function(params) {
                      return "{b|通讯报警}\n\n" + "{a|" + params.value + "%}";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "14",
                      fontWeight: "normal",
                      color: "#fff"
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#613fd1",
                    shadowColor: "#613fd1",
                    shadowBlur: 0
                  }
                }
              },
              {
                value: 25,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "#453284"
                  },
                  emphasis: {
                    color: "#453284"
                  }
                }
              }
            ]
          }
        ]
      };

      this.$nextTick(() => {
        if (this.$refs.chart) {
          this.lineChart = this.$echarts.init(this.$refs.chart);
          this.lineChart.setOption(option);
        }
      });
    }
  },
  mounted() {
    // if (this.activeName == "历史报警查询") {
    //   setTimeout(() => {
    //     this.init();
    //   }, 500);
    // }
  }
};
</script>

<style scoped lang="scss">
.echarts_box {
  .chart {
    width: 100%;
    /* height: 260px; */
  }
}
.fixed_echarts {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100% !important;
  height: 100% !important;
  background: url(../../../../../assets/images/applicationCenter/app_bg.jpg)
    no-repeat 100%;
  background-size: cover;
}
</style>
